<template>
  <div class="homepage">
    <div class="company-profile-h">
      <div class="subtitle"><span>{{ $t('navbar.introduction') }}</span><a href="/#/company-profile"></a></div>
      <div class="profile">
        <div class="cover"></div>
        <p class="p-text" v-html="profile"></p>
      </div>
    </div>
    <div class="news">
      <div class="subtitle"><span>{{ $t('navbar.news') }}</span><a href="/#/news-dynamic"></a></div>
      <div class="news-item" v-for="(item, index) in newsList" :key="index">
        <!-- <span class="news-title">浙江恒喆自动化设备有限公司的新闻浙江恒喆自动化设备有限公司的新闻</span> -->
        <!-- <router-link :to="'/news-detail/'+item.newsId"><span class="news-title">{{item.title}}</span></router-link> -->
        <a :href="'/#/news-detail/'+item.newsId" target="_blank"><span class="news-title">{{item.title}}</span></a>
        <span class="jumpNews phone-only">&gt;</span>
      </div>
    </div>
    <div class="product-show" v-if="productList.length > 0">
      <div class="subtitle"><span>{{ $t('navbar.product') }}</span><a href="/#/product-center/1"></a></div>
      <swiper :options="option" ref="mySwiper" class="pc-only">
        <swiper-slide v-for="(item,index) in productList" :key="index">
          <product-item :info="item" ></product-item>
        </swiper-slide>
      </swiper>
      <div class="product-list-m phone-only">
        <product-item v-for="(item, index) in productList" :info="item" :key="index"></product-item>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import productItem from 'COMPS/product-item.vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'homepage',
    components: {
      swiper,
      swiperSlide,
      productItem
    },
    data() {
      return {
        newsList: [],
        productList: [],
        option: {
          loop: true,
          slidesPerView: 3,
          observer:true,
          observeParents:true,
          autoplay: true,
        }
      }
    },
    mounted() {
      this.getNewsList();
      this.getProductList();
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      },
      profile() {
        return this.$t('profile');
      }
    },
    methods: {
      getNewsList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve([{
              title: '1这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 1
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 2
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 3
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 4
            },{
              title: '这是一条新闻热点，它火爆了全球，身份特殊，有点但没说收看',
              time: '2018-09-19',
              newsId: 5
            }])
          }).then((res) => {
            that.newsList = res;
          })
        }

        this.$axios.get('/pc.php/news/list', {
          params: {
            page: 1
          }
        }).then((res) => {
          that.newsList = res.data.map((e, i) => {
            return {
              title: e.news_title,
              time: e.news_time,
              newsId: e.news_id
            }
          })
        })
      },      
      getProductList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve([{
              cover: 'https://www.zjhzzdh.cn/static/images/BLM.png?cffdf02dc85dcc4d761fb2247781a2a8',
              name: 'BLM56系列雷达料位计BLM56系列雷达料位计',
              price: '8000',
              type: 1,
              pId: 1
            },{
              cover: 'https://www.zjhzzdh.cn/static/images/BLM.png?cffdf02dc85dcc4d761fb2247781a2a8',
              name: 'BLM56系列雷达料位计',
              price: '800',
              type: 2,
              pId: 2
            },{
              cover: 'https://www.zjhzzdh.cn/static/images/BLM.png?cffdf02dc85dcc4d761fb2247781a2a8',
              name: 'BLM56系列雷达料位计',
              price: '800',
              type: 1,
              pId: 1
            }])
          }).then((res) => {
            that.productList = res;
          })
        }
        this.$axios.get('/pc.php/goods/goodsList', {
          params: {
            goods_cate: 9,
            page: 1
          }
        }).then((res) => {
            that.productList = res.data.map((e, i) => {
              return {
                cover: e.goods_img,
                name: e.goods_name,
                price: e.price,
                type: 1,
                pId: e.goods_id
              }
            })
            console.log(that.productList)
          })
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .homepage {
    .company-profile-h {
      display: inline-block;
      // width: 600px;
      width: 880px; 
      .profile {
        // height: 240px;
        background-color: #f7f7f7;
        box-sizing: border-box;
        padding: 20px 20px 30px 20px;
        overflow: hidden;
        display: flex;
        .cover {
          // display: inline-block;
          vertical-align: top;
          width: 130px;
          height: 130px;
          margin-right: 20px;
          border-radius: 5px;
          background-image: url(~IMGS/company.png);
          background-size: cover;
        }
        .p-text {
          flex: 1;
          // display: inline-block;
          vertical-align: top;
          width: 395px;
          font-size: 14px;
          line-height: 24px;
          color: #666666;
        }
      }
      .On-xs({
        width: 100%;
        .profile {
          margin-top: 20px;
          background-color: #fff;
          padding: 0px;
          height: 100%;
          .p-text {
            width: 165px;
            line-height: 20px;
            height: 130px;
            overflow: scroll;
          }
        }
      });
    }
    .news {
      float: right;
      width: 250px;
      .news-item {
        cursor: pointer;
        line-height: 48px;
        height: 48px;
        font-size: 14px;
        padding: 0 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #f7f7f7;
        .Mult-line(1);
        >a{color: #666666;}
        >a:hover {
          color: #006d60;
        }
      }
      .On-xs({
        width: 100%;
        clear: both;
        .news-item {
          background-color: #fff;
          line-height: 36px;
          height: 36px;
          padding: 0px;
          padding-right: 20px;
          .news-title {
            display: inline-block;
            width: 85%;
            color: #666;
          }
          .jumpNews {
            float: right;
          }
        }
      });
    }
    .product-show {
      float: left;
      margin-left: 0px;
      margin-top: 25px;
      width: 880px;
      text-align: left;
      .swiper-container {
        padding-left: 20px;
        margin-top: 30px;
      }
      .On-xs({
        width: 100%;
        clear: both;
        margin: 0px;
        .product-list-m {
          margin-top: 20px;
          .product-item {
            &:nth-of-type(2n-1) {
              margin-right: 20px;
              margin-bottom: 25px;
            }
          }
        }
      });
      @media (max-width: 360px) {
        .product-list-m {
          .product-item {
            &:nth-of-type(2n-1) {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
</style>